<template>
  <van-tabbar
    v-model="activeTabBar"
    active-color="#ee0a24"
    inactive-color="#000"
  >
    <van-tabbar-item v-for="(item,index) in tabMenu" :key="index" :icon="item.ico" @click="jumpTo(item.name)">
      {{item.title}}
    </van-tabbar-item>
  </van-tabbar>
</template>

<script>
export default {
  data() {
    return {
      activeTabBar: 0,
      tabMenu:[{
        id:0,
        title:'开场白',
        name:"index",
        ico:'home-o'
      },{
        id:1,
        title:'搜话术',
        name:"talkingTag",
        ico:'records'
      },{
        id:2,
        title:'场景',
        name:"scene",
        ico:'friends-o'
      },{
        id:3,
        title:'男女心理',
        name:'attention',
        ico:'chat-o'
      },{
        id:4,
        title:'女生说',
        name:'girlSay',
        ico:'comment-o'
      }]
    };
  },
  watch: {
    $route: function (nv, ov) {
      console.log(nv);
    },
  },
  mounted() {
    let routeName = this.$route.name;
    for(var i in this.tabMenu){
      if(this.tabMenu[i].name.indexOf(routeName)!=-1){
        this.activeTabBar=this.tabMenu[i].id;
      }
    }
  },
  methods: {
    jumpTo(name) {
      this.$router.replace('/'+name);
      // this.$router.push({name,replace:true});
    },
  },
};
</script>

<style lang="scss" scoped>
</style>